<template>
  <div>
    <MyDialog>
      <template v-slot:head>
        <h2>本周热搜 TOP5</h2>
      </template>
      <template v-slot:content>
        <div>
          <ul class="list">
            <li class="list-item">
              <span class="tag">#区块链</span>
              <span class="icon"><span class="flame-icon">🔥</span>96</span>
            </li>
            <li class="list-item">
              <span class="tag">#数据挖掘</span>
              <span class="icon"><span class="flame-icon">🔥</span>91</span>
            </li>
            <li class="list-item">
              <span class="tag">#无人机</span>
              <span class="icon"><span class="flame-icon">🔥</span>87</span>
            </li>
            <li class="list-item">
              <span class="tag">#生命科学</span>
              <span class="icon"><span class="flame-icon">🔥</span>72</span>
            </li>
            <li class="list-item">
              <span class="tag">#传感器</span>
              <span class="icon"><span class="flame-icon">🔥</span>60</span>
            </li>
          </ul>
        </div>
      </template>
      <template v-slot:footer>
        <!-- <button></button> -->
      </template>
    </MyDialog>
    <MyDialog>
      <template v-slot:head>
        <div class="custom-header">
          <h2>可能感兴趣的人</h2>
          <span class="change"><span><img src="./assets/change.svg"></span>换一批</span>
        </div>

      </template>
      <template v-slot:content>
        <div class="content">
          <ul class="person-list">
            <li class="person-item">
              <div class="left">
                <p class="person-name">李国盛 ♂ <span>52岁</span></p>
                <p class="person-details">研究领域：机电一体化技术<br>哈尔滨工业大学 · 教授</p>
              </div>
              <a href="#" class="follow-button">+ 关注</a>
            </li>
            <li class="person-item">
              <div class="left">
                <p class="person-name">陈颖 ♀ <span>36岁</span></p>
                <p class="person-details">研究领域：人工智能<br>清华大学 · 副教授</p>
              </div>
              <a href="#" class="follow-button">+ 关注</a>
            </li>
            <li class="person-item">
              <div class="left">
                <p class="person-name">陈颖 ♀ <span>36岁</span></p>
                <p class="person-details">研究领域：人工智能<br>清华大学 · 副教授</p>
              </div>
              <a href="#" class="follow-button">+ 关注</a>
            </li>
          </ul>
        </div>
      </template>
    </MyDialog>
  </div>
</template>
<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data() {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

<style>
body {
  background-color: #F4F6FA;
}

.list {
  /* list-style: none; */
  height: 40px;
  margin: 0;
  padding: 0;
}

/* List Item Styling */
.list-item {
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 25px 8px 16px;
  border-bottom: 1px solid #e6e6e6;
}

.list-item:last-child {
  border-bottom: none;
}

/* Tag and Icon Styling */
.tag {
  color: #333;
  font-size: 14px;
  background-color: #F5F6FA;
  padding: 5px;
  border-radius: 2px;
  height: 20px;
  line-height: 20px;

}

.icon {
  font-size: 14px;
  display: flex;
  align-items: center;
}

/* Flame Icon */
.flame-icon {
  margin-right: 4px;
  font-size: 16px;
}

.custom-header {
  display: flex;
  justify-content: space-between; 
  align-items: center;
}
.custom-header .change{
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
}
.custom-header .change img {
  width: 20px;
    margin-right: 5px;
}
/* Person List Styling */
.person-list {
  list-style-type: none;
  padding: 0;
  margin: 0;

}

.person-item {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
.person-item a{
  background-color: #007AFF;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-radius: 20px;
  font-size: 12px;
  margin-top: 0px
}

.person-name {
  font-weight: bold;
  font-size: 18px;
}
.person-name span{
  color: #ccc;
}

.person-details {
  margin-top: 5px;
  color: #666;
}

.follow-button {
  display: inline-block;
  background-color: #3f98e7;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 10px;
}
</style>